<template>
    <div style="min-width: 809px">
        <div v-if="$route.path == '/noArrive'">
            <div class="vs-search-box">
                <div class="vs-table-box">
                    <el-form ref="form" :inline="true" v-search-box-enter :model="paging" label-width="110px">
                        <el-form-item label="">
                            <div style="width: 400px">
                                <el-input placeholder="请输入姓名或手机号或会员卡号" v-model="paging.keys">
                                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                                    <template slot="append">
                                        <div style="cursor: pointer" @click="search()">查找会员</div>
                                    </template>
                                </el-input>
                            </div>
                        </el-form-item>
                        <el-form-item label="查询时间段：" style="margin-left: 20px">
                            <!-- <el-date-picker v-model="paging.mouth" type="month" format="yyyy-MM" value-format="yyyy-MM" placeholder="请选择" style="width: 220px">
                            </el-date-picker> -->
                            <el-input v-model="paging.min_day" v-enter-money class="vs-w-100"></el-input>
                            <span class="vs-m-l-10 vs-m-r-10">~</span>
                            <el-input v-model="paging.max_day" v-enter-money placeholder="" class="vs-w-100"></el-input>
                        </el-form-item>
                        <el-form-item class="">
                            <el-button @click="reset">重置</el-button>
                            <el-button @click="handleCurrentChange(1)" type="primary">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div>
                    <el-button type="primary" @click="editTemplate()">短信编辑模板</el-button>
                    <!-- 发送短信这里有判断 的 三种 看设计图 -->
                    <el-button type="primary" @click="setSms()">发送短信</el-button>
                    <el-button v-if="utils.getIsShopowner()" icon="el-icon-download" type="primary" @click="exportFile()">导出</el-button>
                </div>
            </div>
            <div class="vs-search-box">
                <el-table border ref="tableData" height="600px" v-loading="loading" :data="tableData" style="width: 100%">
                    <el-table-column type="selection" align="center"> </el-table-column>
                    <el-table-column label="会员卡号" prop="vip_no"> </el-table-column>
                    <el-table-column label="姓名" prop="realname"> </el-table-column>
                    <el-table-column label="性别" prop="gender">
                        <template slot-scope="scope">
                            <div>
                                {{ scope.row.gender == 1 ? '男' : '女' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="手机号" prop="phone"> </el-table-column>
                    <el-table-column label="最后消费日期" prop="last_time"> </el-table-column>
                    <el-table-column label="未到店天数" prop="day"> </el-table-column>
                    <el-table-column label="提醒日期"> </el-table-column>
                </el-table>
                <div class="vs-paging-box">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="paging.page" :page-size="paging.limit" layout="total, sizes, prev, pager, next, jumper" :total="paging.total" :page-sizes="[100, 200, 500, 1000]"> </el-pagination>
                </div>
            </div>
        </div>
        <router-view></router-view>
        <el-dialog title="短信编辑模板" :visible.sync="dialogVisible" width="400px" :before-close="dialogBeforeClose" style="text-align: center">
            <div class="dialog_body">
                <div>短信模板内容</div>
                <div class="d_body">
                    <el-input type="textarea" v-model="birthday_content" placeholder="" :rows="6"> </el-input>
                </div>
                <p class="vs-m-b-0">
                    <el-tag type="warning" size="small">{{ text }}</el-tag>
                    <span class="vs-m-l-10">为用户姓名</span>
                </p>
            </div>
            <div slot="footer" style="margin-top: 20px">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="subContent()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    // import { join } from 'mock/user';
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                text: '{{username}}',
                birthday_content: '',
                timeArr: [],
                paging: {
                    page: 1,
                    limit: 100,
                    total: 0,
                    min_day: '',
                    max_day: '',
                    mouth: '',
                    keys: '',
                },
                loading2: false,
                dialogVisible: false,
                tableData: [],
            };
        },
        created() {
            this.getList();
        },
        computed: {
            ...mapState('user', ['userInfo']),
        },
        mounted() {},
        filters: {
            rtBrithday(val) {
                if (val) {
                    return val.split('-')[1] + '-' + val.split('-')[2];
                }
                return val;
            },
        },
        methods: {
            async editTemplate() {
                this.loading2 = true;
                this.dialogVisible = true;
                console.log(this.userInfo.store, 'this.userInfo.store');
                let { code, data } = await this.$Http.getStoreShortMessage({ id: this.userInfo.store.id });
                this.loading2 = false;
                if (code) {
                    this.birthday_content = data.long_message;
                }
            },
            reset() {
                //重置
                this.paging = this.$options.data().paging;
                this.handleCurrentChange(1);
            },
            //搜索
            search() {
                this.getList();
            },
            //更新短信模板
            async subContent() {
                let { code, data } = await this.$Http.setLongContent({
                    long_content: this.birthday_content,
                    store_id: this.userInfo?.store?.id,
                });
                if (code == 10000) {
                    this.$message.success('编辑成功');
                    this.dialogVisible = false;
                }
            },
            //导出文件
            async exportFile() {
                if (!this.$refs.tableData.selection.length) {
                    return this.$message.warning('请选择您要导出的会员');
                }
                let arr = [];
                this.$refs.tableData.selection.forEach((e) => {
                    arr.push(e.id);
                });
                this.utils.exportFile('store/user/exportNotStore', '久未到店列表', arr.join(','));
            },
            //发送短信
            async setSms() {
                if (!this.$refs.tableData.selection.length) {
                    return this.$message.warning('请选择您要发送的会员');
                }
                let arr = [];
                this.$refs.tableData.selection.forEach((e) => {
                    arr.push(e.id);
                });
                let { code, data } = await this.$Http.setSms({
                    ids: arr.join(','),
                    type: 4, //3生日通知 ， 4 久未到店
                });
            },
            //列表
            async getList() {
                if (this.paging.bill_time_start) {
                    this.paging.date_start = this.paging.bill_time_start[0];
                    this.paging.date_end = this.paging.bill_time_start[1];
                }
                this.loading = true;
                let { code, data } = await this.$Http.getNotStore(this.paging);
                this.loading = false;
                if (code) {
                    this.tableData = data.data;
                    this.paging.total = data.total;
                }
            },
            dialogBeforeClose() {
                this.dialogVisible = false;
            },
            handleSizeChange(val) {
                this.paging.limit = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.paging.page = val;
                this.getList();
            },
        },
    };
</script>

<style lang="scss" scoped>
    ::v-deep {
        .el-dialog__body {
            padding: 10px 20px;
            border-top: 1px solid rgba($color: #000000, $alpha: 0.2);
        }
    }

    .image-thumbnail {
        width: 130px;
        height: 130px;
    }

    .vs-table-box {
        display: flex;
    }

    .dialog_body {
        display: flex;
        flex-direction: column;
        text-align: left;

        > div:first-child {
            margin: 10px 0;
        }

        .d_body {
            display: flex;
            border: 1px solid rgba($color: #000000, $alpha: 0.1);
            padding: 10px;

            > div:last-child {
                display: flex;
                flex-direction: column;
                margin: 0 20px;

                // .ipt_body {
                //   width: 250px ;
                //   height: 100px;
                //     border: 1px solid rgba($color: #000000, $alpha: .3);

                // }

                > div:last-child {
                    margin-top: 20px;
                    text-align: right;
                }
            }
        }
    }
</style>
